<template>
  <view class="page">
    <!-- 头部标题栏 -->
    <view class="page-content">
      <!-- 收货人信息 -->
      <view class="page-card-div">
        <view class="info-name">{{orderData.receiverName}}<span>{{orderData.receiverMobile}}</span></view>
        <view class="info-addres">{{orderData.receiverDetailAddress}}</view>
      </view>
      <!-- 商品信息 -->
      <view class="shop-view">
        <view class="order-list">
          <view class="order-list-content" v-for="item in orderData.items" :key="item.id">
            <image :src="item.picUrl" style="width: 132rpx; height: 132rpx; overflow: hidden;border-radius: 16rpx; background-color: #f8f8f8;" mode=""></image>
            <view class="content-right">
              <view class="content-right-title">
                <view class="content-right-title-left">{{item.spuName}}</view>
                <view class="content-right-title-right"><span>￥</span>{{utils.moneyFormatter(item.price / 100)}}</view>
              </view>
              <view class="content-right-num">
                <!-- <view class="content-right-title-left">{{orderData.info}}</view> -->
                <view class="content-right-title-right">x{{item.count}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 订单信息 -->
      <view class="page-card-div margin-b">
        <view class="info-row">
          <view class="info-row-left">货品金额</view>
          <view class="info-row-right"><span>￥</span>{{utils.moneyFormatter(orderData.totalPrice / 100)}}</view>
        </view>
        <view class="info-row">
          <view class="info-row-left">运费金额</view>
          <view class="info-row-right"><span>￥</span>{{utils.moneyFormatter(orderData.deliveryPrice / 100)}}</view>
        </view>
        <view class="info-row">
          <view class="info-row-left">优惠金额</view>
          <view class="info-row-right"><span>-￥</span>{{utils.moneyFormatter(orderData.discountPrice / 100)}}</view>
        </view>
        <view class="info-row">
          <view class="info-row-left">合计</view>
          <view class="info-row-right row-red"><span>￥</span>{{utils.moneyFormatter(orderData.payPrice / 100)}}</view>
        </view>
        <view class="info-line"></view>
        <view class="info-row">
          <view class="info-row-left">订单编号</view>
          <view class="info-row-right1">{{orderData.no}}<span @click="copy(orderData.no)">复制</span></view>
        </view>
        <view class="info-row" v-if="orderData.createTime">
          <view class="info-row-left">创建时间</view>
          <view class="info-row-right1">{{formatDateTime(orderData.createTime)}}</view>
        </view>
        <view class="info-row" v-if="orderData.payTime">
          <view class="info-row-left">付款时间</view>
          <view class="info-row-right1">{{formatDateTime(orderData.payTime)}}</view>
        </view>
<!--        <view class="info-row" v-if="orderData.deliveryTime">
          <view class="info-row-left">发货时间</view>
          <view class="info-row-right1">{{formatDateTime(orderData.deliveryTime)}}</view>
        </view>
        <view class="info-row" v-if="orderData.logisticsNo">
          <view class="info-row-left">物流单号</view>
          <view class="info-row-right1">{{orderData.logisticsNo}}<span @click="copy(orderData.logisticsNo)">复制</span></view>
        </view> -->
        <view class="info-row" v-if="orderData.receiveTime">
          <view class="info-row-left">完成时间</view>
          <view class="info-row-right1">{{formatDateTime(orderData.receiveTime)}}</view>
        </view>
        <view class="info-row-block" v-if="orderData.userRemark">
          <view class="info-row-left">买家留言</view>
          <view class="info-row-right1 info-row-textarea">{{orderData.userRemark}}</view>
        </view>
      </view>
    </view>
    <view class="ui-fixed-footer">
      <fui-button v-show="btnType === '1'" text="返回" height="78rpx" @click="tab.navigateBack"></fui-button>
      <fui-button v-show="btnType === '2'" text="发货管理" height="78rpx" @click="handleToDelivery"></fui-button>
      <!-- <fui-button text="发货管理" height="78rpx" @click="handleToDelivery"></fui-button> -->
      <fui-button v-show="btnType === '3'" text="物流信息" height="78rpx" @click="handleToLogistics"></fui-button>
      <fui-button v-show="btnType === '4'" text="发票管理" height="78rpx" @click="handleToInvoice"></fui-button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, inject } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useStore } from 'vuex'
import orderApi from '@/api/order'
import { setTitle } from '@/utils/common'
import utils from '@/components/firstui/fui-utils'

const store = useStore()
const tab = inject('$tab')
const modal = inject('$modal')
const auth = inject('$auth')

// 获取订单详情
const params = ref({})
const orderData = ref({})
const getOrderDetail = () => {
  try {
    orderApi.getOrderDetail(params.value.orderId).then((res) => {
      if (res.code === 0) {
        const data = res.data || {}
        const discountPrice = Math.abs(data.payPrice - data.totalPrice - data.deliveryPrice)
        orderData.value = {
          ...data,
          title: data.items[0].spuName,
          imgUrl: data.items[0].picUrl,
          // price: params.value.orderType === '1' ? (data.realPrice / data.productCount).toFixed(2) : data.items[0].price,
          price: data.items[0].price,
          deliveryPrice: data.deliveryPrice,
          // payPrice: params.value.orderType === '1' ? data.realPrice : data.payPrice
          payPrice: data.payPrice,
          discountPrice
        }
      } else {
        modal.msgError(res.msg)
      }
    })
  } catch (e) {
    modal.msgError('获取订单统计数据失败')
  }
}

onLoad((option) => {
  params.value = { 
    ...option,
    orderStatus: decodeURIComponent(option.orderStatus)
  }
  setTitle(decodeURIComponent(option.orderStatus))
  getOrderDetail()
})

// 时间格式化
const formatDateTime = (date) => {
  return utils.dateFormatter(date, 'y-m-d h:i:s', 2)
}

// 复制事件
const copy = (text) => {
  uni.setClipboardData({
    data: text,
    success: () => {
      modal.msg('复制成功')
    },
    fail: (err) => {
      modal.msgError('复制失败')
    }
  })
}

// 按钮显示
const userType = computed(() => store.getters.userType)
const btnType = computed(() => {
  let type = '1'
  if (userType.value === '1') { // 供应链
    if (params.value.orderStatus === '待支付') type = '1'
    if (params.value.orderStatus === '待发货') type = params.value.orderType === '1' ? '2' : '1' // 自营 | 直供
    if (params.value.orderStatus === '待收货') type = '3'
    if (params.value.orderStatus === '已完成') type = '1'
  } else { // 供应商
    if (params.value.orderStatus === '待支付') type = '1'
    if (params.value.orderStatus === '待发货') type = auth.hasRoleOr(['scm_gysfhzy']) ? '2' : '1'
    if (params.value.orderStatus === '待收货') type = auth.hasRoleOr(['scm_gysfhzy']) ? '2' : '1'
    if (params.value.orderStatus === '已完成') type = orderData.value.sfkp === 1 ? '4' : '1' // 是否开票
  }
  return type
})

// 确认发货
const handleToDelivery = () => {
  store.commit('SET_DELIVERY_ORDERINFO', orderData.value)
  tab.navigateTo(`/pages/delivery/index?orderId=${orderData.value.id}`)
}

// 发票管理
const handleToInvoice = () => {
  tab.navigateTo(`/pages/order/view/invoice?orderId=${orderData.value.id}&invoiceTitleId=${orderData.value.invoiceId}`)
}

// 物流信息
const handleToLogistics = () => {
  tab.navigateTo(`/pages/delivery/index?orderId=${orderData.value.id}&isView=1`)
}
</script>

<style lang="scss" scoped>
.page {
  background: #f8f8f8;
  position: relative;
  min-height: 100%;
  box-sizing: border-box;
  font-family: PingFang SC, PingFang SC;
  width: 100%;
  overflow-y: auto;
  padding-bottom: 2rpx;

  .row-flex {
    display: flex;
    align-items: center;
  }

  .page-top {
    position: fixed;
    width: 100%;
    height: 100rpx;
    box-sizing: border-box;
    line-height: 80rpx;
    background-color: #ffffff;
    padding: 10rpx 36rpx;

    .icon-bark {
      position: absolute;
      left: 30rpx;
      height: 80rpx;
      line-height: 80rpx;
    }

    .page-top-title {
      color: #333;
      font-size: 32rpx;
      font-weight: bold;
      padding-left: 48rpx;
    }
  }

  &-content {
    width: calc(100% - 72rpx);
    position: absolute;
    top: 30rpx;
    left: 36rpx;

    .page-card-div {
      width: 100%;
      background: #ffffff;
      padding: 30rpx 36rpx;
      box-sizing: border-box;
      border-radius: 16rpx;
      font-size: 24rpx;
      line-height: 40rpx;
      color: #333333;
      margin-bottom: 24rpx;

      .info-name {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 8rpx;

        span {
          font-size: 28rpx;
          font-weight: 400;
          color: #999999;
          padding-left: 20rpx;
        }
      }
      .info-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 26rpx;
        color: #333333;
        &:first-child {
          margin-top: 0;
        }
        .info-row-right {
          font-size: 28rpx;
          font-weight: bold;

          span {
            font-size: 24rpx;
          }
        }
        .row-red {
          font-size: 36rpx;
          color: #e9574f;
        }
        .info-row-right1 {
          font-size: 24rpx;
          color: #333333;

          span {
            width: 60rpx;
            height: 30rpx;
            background: #f1f1f1;
            border-radius: 4rpx;
            font-size: 20rpx;
            display: inline-block;
            text-align: center;
            line-height: 30rpx;
            margin-left: 16rpx;
          }
        }
      }
      .info-row-block {
        margin-top: 26rpx;
        .info-row-textarea {
          position: relative;
          background-color: #f9f9f9;
          border-radius: 8rpx;
          margin-top: 16rpx;
          padding: 16rpx;
          &::before {
            position: absolute;
            content: '';
            top: 0;
            left: 16rpx;
            width: 16rpx;
            height: 16rpx;
            background-color: #f9f9f9;
            transform: rotate(45deg);
            margin-top: -8rpx;
          }
        }
      }
      .info-line {
        width: calc(100% + 40rpx);
        position: relative;
        left: -20rpx;
        right: -20rpx;
        height: 1px;
        background: #e8e8e8;
        margin-top: 26rpx;
      }
    }
  }
  .margin-b {
    margin-bottom: 170rpx;
  }
  .ui-fixed-footer {
    :deep(.fui-button__primary) {
      background: #ea5750 !important;
    }
  }
  .shop-view {
    height: calc(100% - 80rpx);
    overflow-y: auto;
  }

  .order-list {
    width: 100%;
    background: #ffffff;
    border-radius: 16rpx;
    margin-bottom: 30rpx;
    overflow: hidden;
    .order-title {
      width: 100%;
      height: 78rpx;
      padding: 0 28rpx;
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      span {
        padding-left: 12rpx;
      }
    }

    .order-list-content {   
      width: calc(100% - 56rpx);
      padding: 24rpx 0;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      margin: 0 28rpx;
      border-top: 1px solid #f1f1f1;
      
      &:first-child{
        border-top: 0px;
      }
      
      .content-right {
        width: calc(100% - 172rpx);
        font-size: 28rpx;
        font-weight: bold;
        color: #333333;
        line-height: 40rpx;
        .content-right-title {
          display: flex;
          justify-content: space-between;
          .content-right-title-left{
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .content-right-title-right {
            font-size: 36rpx;

            span {
              font-size: 24rpx;
            }
          }
        }
        .content-right-num {
          font-size: 24rpx;
          font-weight: 400;
          color: #666666;
          display: flex;
          justify-content: space-between;
        }
      }

      .right-list {
        display: flex;
        flex-wrap: wrap;

        .right-text {
          width: 50%;
          font-size: 24rpx;
          font-weight: 400;
          color: #999999;
          display: flex;
          align-items: center;
          margin-bottom: 10rpx;

          image {
            padding-right: 10rpx;
          }

          span {
            color: #333333;
          }

          .right-number {
            font-weight: bold;
            color: var(--fui-color-link);
            padding: 0 10rpx;
          }
        }
      }
    }
    .order-list-bottom {
      width: calc(100% - 56rpx);
      padding: 12rpx 0rpx 20rpx;
      margin: 18rpx auto 0;
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
      border-top: 1px solid #f1f1f1;
      text-align: right;
      span {
        font-size: 28rpx;
        color: #666666;
      }
    }
  }
}
::-webkit-scrollbar {
  display: none; /* 隐藏滚动条本身 */
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
}
</style>